<template>
  <div class="centerData">
    <div class="centerData_Title">
      <div class="centerData_T">
        <img
          src="https://files.axshare.com/gsc/7WDST5/d4/eb/b6/d4ebb6bed5604e359b60606df79a9a92/images/大屏3/u11.svg?pageId=90485d84-bf5e-41bb-b221-8d5733b222cf"
          alt="">
        <span>莲都区项目数量分布</span>
      </div>
    </div>

    <!-- <mapValue></mapValue> -->

    <!-- <ecahrtsMap></ecahrtsMap> -->

    <div class="maskStyle">

      <testMap></testMap>
    </div>

  </div>
</template>

<script lang="ts" setup>
import mapValue from './map.vue'
import ecahrtsMap from './ecahrtsMap.vue'
import testMap from './testMap.vue';
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.centerData {
  width: 930px;
  height: 100%;
  // border: 1px solid rgb(54, 216, 5);
  // mask-image: url("../../../../assets/lingshui/gradient_image-8a2697e0.png");
  // -webkit-mask-image: url("../../../../assets/lingshui/gradient_image-8a2697e0.png");
  // mask-size: 100% 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  // z-index: 96;

  .centerData_Title {
    width: 100%;
    height: 49px;
    // background-color: red;
    // border: 1px solid red;
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 99;
    top: 8px;

    .centerData_T {
      width: 325px;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        position: absolute;
        font-size: 18px;
        font-weight: 700;
        color: rgb(255, 255, 255);
        // top: 0;
      }
    }
  }

  .maskStyle {
    position: absolute;
    // border: 1px solid red;
    width: 100%;
    height: 100%;
    mask-image: url("../../../../assets/lingshui/gradient_image-8a2697e0.png");
    -webkit-mask-image: url("../../../../assets/lingshui/gradient_image-8a2697e0.png");
    mask-size: 100% 100%;
  }
}
</style>